<template>
    <div class="pt-[20px] px-[18px] pb-[0]">
      <!-- 实时告警  -->
      <div class="flex  justify-between">
        <div v-for="(item, index) in imageList" :key="index"
          @click="showAlarmList({ defaultSearch: { alarmType: item.type } })">
          <div
            :class="index == 0 ? ' bg-[url(@/assets/screenimg/timealerts.png)]' : index == 1 ? ' bg-[url(@/assets/screenimg/timealerts2.png)]' : 'bg-[url(@/assets/screenimg/timealerts3.png)]'"
            class="
          w-[92px] 
          h-[104px]
           bg-no-repeat ">
            <div :class="index == 0 ? 'text-[#FF802B]' : index == 1 ? 'text-[#D6D6D6]' : 'text-[#FF4141]'" class="text-[24px]  font-medium text-center 
           pt-[52px]">
              <div v-if="item.number <= 999">{{ isNullOrEmpty( item.number ) }}</div>
              <div v-else>999+</div>
            </div>
          </div>
          <div class="alltext text-center pt-[0px] mb-[24px]">{{ isNullOrEmpty( item.name ) }}</div>
        </div>
      </div>
      <div class="h-[1px] bg-[var(--data-border-color)] mb-[10px]"></div>
    </div>
  
  </template>
  <script lang="ts" setup>
import { isNullOrEmpty } from '@/utils/functions'
  import { screerealtime } from '@/api/screen/largeData'
  import { showAlarmList } from '@/views/large-data-screen/utils/index'
  import { useDataDashboardThemeStore } from '@/store/modules/data-dashboard-theme'
  const useDataDashboardTheme = ref()
  const alarmType = ref(0)
  const imageList = ref([
    {
      name: '故障',
      number: 0,
      type: 2
    },
    {
      name: '离线',
      number: 0,
      type: 3
    },
    {
      name: '报警',
      number: 0,
      type: 1
    }
  ])
  
  onMounted(() => {
  
  })
  watch(() => useDataDashboardThemeStore().GET_SETTING('systematicId'), () => {
    setTimeout(() => {
      useDataDashboardTheme.value = useDataDashboardThemeStore().GET_SETTING('systematicId')
      getscreerealtime()
    }, 100)
  
  },{ immediate: true })
  const getscreerealtime = () => {
    screerealtime({
      searchType: 1, //查询类型(1 单位 2 -个体概览)
      alarmType: alarmType.value,//告警类型   0全部 1.告警 2故障 3 离线
      systematicId: useDataDashboardTheme.value,//系统id
      page: 1,
      limit: 4,
    }).then(res => {
      console.log("获取到实时告警", res);
      imageList.value[0].number = res.result.alarmReal.failure
      imageList.value[1].number = res.result.alarmReal.offline
      imageList.value[2].number = res.result.alarmReal.warning
    })
  }
  </script>
  